<template>
  <div class="container">
    <!--  logo图片  -->
    <img ref="logImg" :src="logoImg" alt="logo图片" style="height: 30px;display:none" />
    <!--  微信公众号二维码图片  -->
    <img ref="codeImg" :src="codeImg" alt="微信公众号二维码图片" style="display: none;" />
    <!--  营销图片  -->
    <img ref="bgImg" :src="bgImg" alt="营销图片" style="width: 200px; display: none;" />
    <div class="content">
      <div style="zoom: 0.5; text-align: center;">
        <img ref="canvasImg" src="" alt="" />
        <canvas
            ref="canvas"
            style="display: none;"
            width="662"
            height="1089"
        ></canvas>
      </div>
    </div>
    <div class="footer">
      <div class="footer-top">
        <div v-for="(item, index) in thumbnailImg" :key="index" class="thumbnail" @click="thumbnailClick(item, index)">
          <img :src="item.stylePic" alt="" :class="imgIndex === index ? 'imgSelect' : ''" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      imgIndex: 0,
      thumbnailImg: [
        { stylePic: require('@/assets/bgImg1.jpeg') },
        { stylePic: require('@/assets/bgImg2.jpeg') },
        { stylePic: require('@/assets/bgImg3.jpeg') },
        { stylePic: require('@/assets/bgImg4.jpeg') },
        { stylePic: require('@/assets/bgImg3.jpeg') },
        { stylePic: require('@/assets/bgImg4.jpeg') }
      ],
      logoImg: require('@/assets/logoImg.png'),
      codeImg: require('@/assets/codeImg.png'),
      bgImg: '',
      date: '2021年10月18日',
      week: '星期一',
      calendar: '农历九月十三',
      change: false,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getPosterInfo()
    },
    getPosterInfo() {
      this.thumbnailClick(this.thumbnailImg[0], '0')
    },
    thumbnailClick(thumbnailImg, imgIndex) {
      var that = this
      this.imgIndex = imgIndex
      var stylePic = thumbnailImg.stylePic

      this.bgImg = stylePic
      // Toast.loading({
      //   forbidClick: true,
      //   message: '海报生成中...'
      // })
      this.$nextTick(function() {
        this.$refs.bgImg.onload = function() {
          // Toast.clear()
          that.initCanvas()
        }
      })
    },
    initCanvas() {
      var canvas = this.$refs.canvas
      console.log('initCanvas>>>>' + canvas)
      var ctx = canvas.getContext('2d')
      canvas.width = 0.8 * window.innerWidth * 2
      canvas.height = 0.74 * window.innerHeight * 2
      ctx.scale(2, 2)
      ctx.fillStyle = '#ffffff'
      ctx.fillRect(0, 0, 0.5 * canvas.width, 0.5 * canvas.height)

      var bgImg = this.$refs.bgImg
      var canvasWidth = canvas.width
      var canvasHeight = canvas.height
      // 解决跨域问题
      // bgImg.setAttribute('crossOrigin', 'Anonymous')
      ctx.drawImage(bgImg, 0, 0, 0.5 * canvasWidth, 0.5 * canvasHeight)

      var logImg = this.$refs.logImg
      var s = (18 / logImg.height) * logImg.width
      // 解决跨域问题
      // logImg.setAttribute('crossOrigin', 'Anonymous')
      ctx.drawImage(logImg, 20, 0.8 * window.innerHeight * 0.02, s, 18)

      var codeImg = this.$refs.codeImg
      var c = (60 / codeImg.height) * codeImg.width
      // 解决跨域问题
      // codeImg.setAttribute('crossOrigin', 'Anonymous')
      ctx.drawImage(codeImg, 0.475 * canvas.width - 60, 0.49 * canvas.height - 60, c, 60)

      ctx.font = '14px HeiTi'
      ctx.fillStyle = '#ffffff'
      ctx.fillText(this.date, 10, 0.45 * canvas.height)
      ctx.font = '13px HeiTi'
      ctx.fillStyle = '#ffffff'
      ctx.fillText(this.week, 24 + ctx.measureText(this.date).width, 0.45 * canvas.height)
      ctx.font = '13px HeiTi'
      ctx.fillStyle = '#ffffff'
      ctx.fillText(this.calendar, 10, 0.47 * canvas.height)

      // 解决跨域问题
      this.$refs.canvasImg.src = canvas.toDataURL('image/png')
      // Notify({ type: 'success', message: '请长按海报保存到手机' })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  font-size: 14px;
  background-color: #f7f7f7;
  height: 100%;
  width: 100%;
}

.content {
  height: 74vh;
  width: 80%;
  margin: 0 auto;
  padding-top: 1vh;
}

.footer-top::-webkit-scrollbar {
  display: none;
}

.footer {
  margin-top: 1vh;
  height: 24vh;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
}

.footer-top {
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  box-sizing: border-box;
}

.footer-top .thumbnail {
  width: 65px;
  height: 92px;
  margin: 0 10px;
  box-sizing: border-box;
}

.footer-top .thumbnail img {
  width: 63px;
  height: 90px;
}

//.footer-bottom {
//  box-sizing: border-box;
//  border-top: 1px solid #e7e7e7;
//  height: 30%;
//}
//
//.footer-bottom .tabList {
//  height: 100%;
//  display: -ms-flexbox;
//  display: flex;
//  -ms-flex-align: center;
//  align-items: center;
//  -ms-flex-pack: distribute;
//  justify-content: space-around;
//}

.imgSelect {
  border: 1px solid #fe0000;
}

.tabSelect {
  color: #fd0404;
  font-weight: bolder;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
